<template>
  <div>
     <!-- Breadcrumb 面包屑 导航区-->
     <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
    </el-breadcrumb>
     <!-- Card 卡片 卡片视图区-->
     <el-card class="box-card">
      <el-form ref="form" :model="form" :rules="FormRules" label-width="150px">
        <el-form-item label="是否运行">
          <el-switch v-model="form.state" :active-value="1"
          :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="CPU查询间隔(秒)">
          <el-input v-model="form.interval_cpu"></el-input>
        </el-form-item>
        <el-form-item label="内存查询间隔(秒)">
          <el-input v-model="form.interval_mem"></el-input>
        </el-form-item>
        <el-form-item label="进程查询间隔(秒)">
          <el-input v-model="form.interval_pid1"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">立即修改</el-button>

        </el-form-item>
        </el-form>
     </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        state: 1,
        interval_cpu: 10,
        interval_mem: 10,
        interval_pid1: 10
      },
      // 这是表单的验证规则对象
      FormRules: {
        // 验证cpu 属性
        interval_cpu: [
          { required: true, message: '请输入CPU时间间隔', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ],
        // 验证mem 属性
        interval_mem: [
          { required: true, message: '请输入内存时间间隔', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ],
        interval_pid1: [
          { required: true, message: '请输入进程时间间隔', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值' }
        ]
      }
    }
  },

  methods: {
    submitForm () {
      // 表单预校验
      this.$refs.form.validate(async valid => {
        console.log(valid)
        if (!valid) return
        let { data: result } = await this.$post('Systems/edit/', this.form)
        console.log(result)
        if (result.meta.status !== 200) {
          console.log('修改失败')
          this.$message.error('修改失败！')
          return false
        }
        this.$message.success('修改成功！')
      })
    },
    async getdata () { // 显示查看
      // 获取故障详细信息
      const { data: res } = await this.$post('Systems/get_detail')
      console.log(res.data)
      if (res.meta.status !== 200) {
        return this.$message.error('读取信息失败')
      }
      this.form = res.data
    }
  },
  created () {
    this.getdata()
  }
}
</script>

  <style  scoped>
  </style>
